<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let name = "摩卡";
        let age = 2;
        let dog = {
            name: name,
            age: age,
            getInfo: function () {
                return `${this.name}-${this.age}`;
            }
        }

        console.log(dog.getInfo());
        
        // 使用增强字面量
        let dog2 = {
            name, // 同名的属性可以省略不写
            age,
            getInfo() { // 可以省略函数的 :function
                return `${this.name}-${this.age}`;
            }
        }

        console.log(dog2.getInfo());

        let dog3 = {
            name,
            age,
            getInfo:() => `${this.name}-${this.age}`
        }
        
        // 非常重要且常见的面试题：箭头函数中this的指向问题
        // 箭头函数内部this指向问题，找箭头函数有没有被普通函数包裹，如果包裹了就和外层
        // 普通函数的this指向一致，否则指向window
        console.log(dog3.getInfo());
        

    </script>
</body>

</html>